<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="1000px"
    append-to-body
    :before-close="close"
  >
    <div class="preview-container" v-if="form.lesseeContractStatus == 3" v-loading="loading">
      <el-image :src="item" style="width: 100%; height: auto;" :preview-src-list="srcList"
                v-for="(item, index) in srcList" :key="index"
      >
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>

    </div>
    <div class="preview-container" v-html="form.contractContent" v-loading="loading" v-else>
    </div>
  </el-dialog>
</template>

<script>
import { debounce } from '@/utils'
import { getLesseeContract } from '@/api/contract/lessee'

export default {
  name: 'view-contract',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      default: '预览合同'
    },
    data: {}
  },
  data() {
    return {
      loading: false,
      form: {
        contractContent: '',
        contractImage: ''
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    srcList() {
      return this.form.contractImage ? this.form.contractImage.split(',') : []
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    init() {
      this.reset()
      this.getLesseeContract()
    },
    getLesseeContract() {
      this.loading = true
      return getLesseeContract(this.data.lesseeContractId).then(res => {
        this.form = res.data
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    reset() {
      this.form = {
        contractContent: '',
        contractImage: ''
      }
      this.resetForm('form')
    },
    close() {
      this.reset()
      this.visible = false
    }
  }
}
</script>


<style scoped lang="scss">
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}

</style>
